<template>
  <div
    ref="botContainerRef"
    class="text-boomot-tool"
    :class="{ show: isShow }"
    transition="scroll-y-reverse-transition"
  >
    <div class="text-boomot-tool-content">
      <div class="item" v-ripple @click="copyTextToClipboard">
        <div class="item-icon">
          <svg
            t="1708759367123"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="2108"
            width="200"
            height="200"
          >
            <path
              d="M896 256a128 128 0 0 1 128 128v512a128 128 0 0 1-128 128H384a128 128 0 0 1-128-128v-128H128a128 128 0 0 1-128-128V128a128 128 0 0 1 128-128h512a128 128 0 0 1 128 128v128h128z m0 76.8H384a51.2 51.2 0 0 0-50.816 44.8L332.8 384v512a51.2 51.2 0 0 0 44.8 50.816l6.4 0.384h512a51.2 51.2 0 0 0 50.816-44.8l0.384-6.4V384a51.2 51.2 0 0 0-44.8-50.816L896 332.8zM691.2 128a51.2 51.2 0 0 0-44.8-50.816L640 76.8H128a51.2 51.2 0 0 0-50.816 44.8L76.8 128v512a51.2 51.2 0 0 0 44.8 50.816l6.4 0.384h128V384a128 128 0 0 1 128-128h307.2V128z"
              fill="#ffffff"
              p-id="2109"
            ></path>
          </svg>
        </div>
        <div class="item-text text-title">复制</div>
      </div>
      <div class="item" v-ripple>
        <div class="item-icon" @click="handleShare">
          <svg
            t="1708759634392"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="3258"
            width="200"
            height="200"
          >
            <path
              d="M929.344 861.248c0 14.784-12.992 26.88-28.864 26.88L106.624 888.128c-15.872 0-28.8-12.032-28.8-26.88L77.824 250.176c0-14.848 12.928-26.88 28.8-26.88l186.496 0L293.12 182.272 106.624 182.272c-38.528 0-69.824 30.4-69.824 67.904l0 611.072c0 37.504 31.296 67.904 69.824 67.904L900.48 929.152c38.656 0 69.888-30.4 69.888-67.904L970.368 650.88l-41.024 0L929.344 861.248zM449.664 724.48c-1.28-6.912-25.536-171.776 82.56-326.592 85.824-122.944 232-202.88 434.304-237.696l7.616 44.096c-189.824 32.64-326.016 106.176-404.8 218.624-97.536 139.136-74.752 299.456-74.56 300.992L449.664 724.48zM848.32 432.832 810.496 408.896 955.52 179.584 705.6 44.352 726.912 4.992 1019.008 163.008Z"
              fill="#ffffff"
              p-id="3259"
            ></path>
          </svg>
        </div>
        <div class="item-text text-title">分享</div>
      </div>
      <div class="item" v-ripple>
        <div class="item-icon" @click="handleClear">
          <svg
            t="1708856239342"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="9407"
            width="200"
            height="200"
          >
            <path
              d="M901.3 504.8l-76.3-150c-13.4-26.3-40-42.6-69.5-42.6H639c-1.1 0-2-0.9-2-2V120.6c0-31.1-25.3-56.3-56.3-56.3h-90c-31.1 0-56.3 25.3-56.3 56.3v189.6c0 1.1-0.9 2-2 2H315.8c-29.5 0-56.1 16.3-69.5 42.6l-76.3 150c-9.2 18.1-8.4 39.3 2.2 56.6 10.3 16.8 27.9 27 47.4 27.6-4.8 101-38.3 205.9-90.2 279.5-12.5 17.8-14.1 40.8-4.1 60.1 10 19.3 29.7 31.3 51.5 31.3h601.5c35 0 66-23.6 75.2-57.4 15.5-56.5 28.4-107.9 29.4-164.9C884 685 874 636 852.9 589c19-1.1 36.1-11.2 46.2-27.6 10.6-17.3 11.4-38.5 2.2-56.6z m-681.4 25.4l76.3-150c3.8-7.4 11.3-12 19.6-12h116.4c32 0 58-26 58-58V120.6c0-0.1 0.2-0.3 0.3-0.3h90c0.1 0 0.3 0.2 0.3 0.3v189.6c0 32 26 58 58 58h116.4c8.3 0 15.8 4.6 19.6 12l76.3 150c0.2 0.3 0.5 1-0.1 2s-1.3 1-1.7 1H221.7c-0.4 0-1.1 0-1.7-1-0.6-1-0.3-1.7-0.1-2zM827 736.6c-0.9 50.5-12.9 98.3-27.4 151.1-2.6 9.5-11.3 16.2-21.2 16.2H651.8c11.3-22.3 18.5-44 23.1-61.2 7.1-26.7 10.7-53.5 10.6-78-0.1-17.1-15.5-30.1-32.4-27.4-13.6 2.2-23.6 14-23.6 27.8 0.1 42.7-14.1 98.2-42.7 138.8H406.2c15.2-21.7 26.1-43.8 33.6-61.9 10-24.3 17.4-49.7 21.2-72.5 2.8-17-10.4-32.5-27.6-32.5-13.6 0-25.3 9.8-27.6 23.3-2.8 16.6-8.3 37.7-17.7 60.4-10.1 24.6-27.8 58.1-55.6 83.3H176.9c-0.5 0-1.2 0-1.8-1.1-0.6-1.1-0.2-1.6 0.1-2 29.7-42.1 54.8-94.5 72.5-151.4 16.2-52.1 25.7-106.9 28-160.3h514.6C816 635.6 828 684 827 736.6z"
              fill="#ffffff"
              p-id="9408"
            ></path>
          </svg>
        </div>
        <div class="item-text text-title">清空</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "TextBoomotTool",
  emits: ["clear"],
  props: {
    show: {
      type: Boolean,
      default: true,
    },
    copyText: {
      type: String,
      default: "",
    },
  },
  computed: {
    isShow() {
      return !!this.copyText;
    },
  },
  data() {
    return { alertShow: false, alterText: "复制成功" };
  },

  methods: {
    copyTextToClipboard() {
      const input = document.createElement("input");
      input.setAttribute("readonly", "readonly");
      input.setAttribute("value", this.copyText);
      document.body.appendChild(input);
      input.select();
      if (document.execCommand("copy")) {
        document.execCommand("copy");
        this.$toast.success("复制成功");
      }
      document.body.removeChild(input);
    },

    handleShare() {
      this.$toast.info("开发中...");
    },
    handleClear() {
      this.$emit("clear");
    },
  },
};
</script>
<style scoped lang="scss">
.text-boomot-tool {
  user-select: none;
  height: 86px;
  transform: translate(0, 80px);
  background-color: transparent;
  position: fixed;
  bottom: 52px;
  left: 0;
  right: 0;
  padding: 10px 10px 0px 10px;
  transition: transform 0.3s ease-in-out;
}
.show {
  transform: translate(0, 0px);
}
.text-boomot-tool .text-boomot-tool-content {
  // background-color: #fff;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  .item {
    // background-color: #666;
    background-color: rgb(var(--v-theme-surface));
    width: 60px;
    height: 60px;
    border-radius: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .item-icon {
      width: 40px;
      height: 40px;
      // background-color: #666;

      border-radius: 50%;
      margin: 0 auto;
      padding: 10px;
      .icon {
        width: 100%;
        height: 100%;
      }
    }
    .item-text {
      text-align: center;
      font-size: 12px;
      // color: #fff;
      margin-top: -6px;
    }
  }
}
</style>
